<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,
           initial-scale=1.0,
          maximum-scale=1.0,
           minimum-scale=1.0,
           user-scalable=no">
    <link rel="stylesheet" href="/kissy/src/css/assets/dpl/base.css"/>
    <link rel="stylesheet" href="/kissy/src/scroll-view/assets/dpl.css"/>
    <style>
        body, ul, li {
            padding: 0;
            margin: 0;
            border: 0;
        }

        .slider {
            width: 540px;
            height: 540px;
            border: 1px solid #B6D1E6;
            overflow: hidden;
            /* pan-y allows whole page scrolling veritcally on swipe area */
            -ms-touch-action: pan-y;
        }

        .slider .ks-scroll-view-content {
            margin: 0;
            padding: 0;
            width: 2700px;
            overflow: hidden;
        }

        .my-slide-nav {
            position: absolute;
            bottom: 5px;
            right: 5px;
            z-index: 99;
        }

        .my-slide-nav li {
            float: left;
            width: 16px;
            height: 16px;
            line-height: 16px;
            margin-left: 3px;
            background-color: #FCF2CF;
            border: 1px solid #F47500;
            color: #D94B01;
            text-align: center;
            cursor: pointer;

        }

        .my-slide-nav li.ks-active {
            width: 18px;
            height: 18px;
            line-height: 18px;
            margin-top: -1px;
            color: #FFF;
            background-color: #FFB442;
            font-weight: bold;
        }

        .slider .ks-scroll-view-content li {
            height: 540px;
            width: 540px;
            overflow: hidden;
            float: left;
            margin: 0;
            padding: 0;
        }

        .ks-scroll-view-slide-nav {
            position: absolute;
            right: 9px;
            bottom: 10px;
            z-index: 1;
            padding-left: 2px;
        }

        .ks-scroll-view-slide-trigger {
            color: #f60;
            cursor: pointer;
            width: 18px;
            height: 18px;
            background: #fff;
            float: left;
            font-size: 13px;
            line-height: 18px;
            overflow: visible;
            text-align: center;
            opacity: .7;
            filter: alpha(opacity=70);
            border: 1px solid #d8d8d8;
            margin-left: -1px;
        }

        .ks-scroll-view-slide-trigger-active {
            background: #f60;
            color: #fff;
            font-weight: 700;
            opacity: 1;
            filter: alpha(opacity=100);
            z-index: 2;
            position: relative;
        }

        .ks-image-zoomer-hide-scrollbar {
            overflow: hidden;
        }

        .ks-image-zoomer {
            left: 0;
            top: 0;
            /*support android 2.3*/
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 10;
            /*background-color: #ffff00;*/
        }

        .ks-image-zoomer-close {
            background: url(http://img02.taobaocdn.com/tps/i2/T1Y1r0Xc8cXXXK3ITg-44-44.png);
            width: 44px;
            height: 44px;
            position: fixed;
            right: 0;
            top: 0;
            z-index: 100;
            cursor: pointer;
        }

        .ks-image-zoomer-mask {
            left: 0;
            top: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 9;
            background-color: #333;
            opacity: 0.6;
            user-select:none;
        }

        .ks-image-zoomer img {
            position: absolute;
            user-select:none;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<h1>open in touch device or emulate touch in chrome</h1>

<h2 id="wait" style="color:red">please wait, loading ....</h2>

<div id="demo2" class="ks-scroll-view slider">
    <ol class="ks-scroll-view-content">
        <li>
            <img
                    width="540"
                    height="540"
                    src="http://gd4.alicdn.com/bao/uploaded/i4/19927025103146716/T1JdpoFexhXXXXXXXX_!!0-item_pic.jpg_540x540.jpg"/>
        </li>
        <li class="hidden">
            <img width="540"
                 height="540"
                 src="http://gd4.alicdn.com/imgextra/i4/1604749927/T2RegJXmtXXXXXXXXX_!!1604749927.jpg_540x540.jpg"/>
        </li>
        <li class="hidden">
            <img width="540"
                 height="540"
                 src="http://gd1.alicdn.com/imgextra/i1/1604749927/T2y7ZmXc4bXXXXXXXX_!!1604749927.jpg_540x540.jpg"/>
        </li>
        <li class="hidden">
            <img width="540"
                 height="540"
                 src="http://gd3.alicdn.com/imgextra/i3/1604749927/T2H9UoXk0aXXXXXXXX_!!1604749927.jpg_540x540.jpg"/>
        </li>
        <li class="hidden">
            <img width="540"
                 height="540"
                 src="http://gd3.alicdn.com/imgextra/i3/1604749927/T2xlguXeXaXXXXXXXX_!!1604749927.jpg_540x540.jpg"/>
        </li>
    </ol>
</div>

<div style="height: 100px"></div>

<div id="demo3" class="ks-scroll-view slider">
    <ol class="ks-scroll-view-content">

        <li class="pic-item"
            data-url="http://img04.taobaocdn.com/bao/uploaded/i4/12867029330434926/T1SarAFaxdXXXXXXXX_!!0-item_pic.jpg">
                    <span class="img-wrap"><img
                            src="http://img04.taobaocdn.com/bao/uploaded/i4/12867029330434926/T1SarAFaxdXXXXXXXX_!!0-item_pic.jpg_540x540.jpg"></span>&gt;
        </li>
        <li class="pic-item"
            data-url="http://img04.taobaocdn.com/bao/uploaded/i4/12867028772473067/T10jJVFlFXXXXXXXXX_!!0-item_pic.jpg">
                    <span class="img-wrap"><img
                            src="http://img04.taobaocdn.com/bao/uploaded/i4/12867028772473067/T10jJVFlFXXXXXXXXX_!!0-item_pic.jpg_540x540.jpg"></span>&gt;
        </li>
        <li class="pic-item"
            data-url="http://img02.taobaocdn.com/bao/uploaded/i2/153962867/T2Q7FrXyFaXXXXXXXX_!!153962867.jpg">
                    <span class="img-wrap"><img
                            src="http://img02.taobaocdn.com/bao/uploaded/i2/153962867/T2Q7FrXyFaXXXXXXXX_!!153962867.jpg_540x540.jpg"></span>&gt;

        </li>
        <li class="pic-item"
            data-url="http://img01.taobaocdn.com/bao/uploaded/i1/153962867/T26v4tXudaXXXXXXXX_!!153962867.jpg">
                    <span class="img-wrap"><img
                            src="http://img01.taobaocdn.com/bao/uploaded/i1/153962867/T26v4tXudaXXXXXXXX_!!153962867.jpg_540x540.jpg"></span>&gt;

        </li>
        <li class="pic-item"
            data-url="http://img03.taobaocdn.com/bao/uploaded/i3/153962867/T2FeBsXzlaXXXXXXXX_!!153962867.jpg">
                   <span class="img-wrap"><img
                           src="http://img03.taobaocdn.com/bao/uploaded/i3/153962867/T2FeBsXzlaXXXXXXXX_!!153962867.jpg_540x540.jpg"></span>&gt;

        </li>
    </ol>
</div>
<div style="height:1000px"></div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script src="/kissy/src/log.js"></script>
<script>
    KISSY.config('packages', {
        slide: {
            base: './'
        },
        'image-zoomer': {
            base: '/kissy/src/scroll-view/sub-modules/plugin/scrollbar/demo/'
        }
    });
    KISSY.use('node,slide,image-zoomer', function (S, Node, Slide, imageZoomer) {
        var $ = Node.all;

        function init(selector) {
            var slide = new Slide({
                srcNode: selector,
                hasTrigger: true,
                direction: 'x'
            }).render();
            slide.triggers.each(function (t, i) {
                t.html(i + 1);
            });
            $(selector).delegate(Node.Gesture.tap, 'img', function (e) {
                imageZoomer.showImage({
                    src: e.currentTarget.src,
                    width: 1200,
                    height: 1200
                });
            });
        }

        init('#demo2');
        init('#demo3');
        $('#wait').css({
            color: 'green'
        }).html('ok');
    });
</script>
</body>
</html>